<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				margin: 10px;
				border: 1px solid #696969;
				background-color: white;
				
			}
			#box2{
				width: 180px;
				height: 180px;
				margin: 10px;
				border: 1px solid #696969;
				background-color: white;
			}
			#box3{
				width: 160px;
				height: 160px;
				margin: 10px;
				border: 1px solid #696969;
				background-color: white;
			}
			#box4{
				width: 140px;
				height: 140px;
				margin: 10px;
				border: 1px solid #696969;
				background-color: white;
				
			}
			#box5{
				width: 120px;
				height: 120px;
				margin: 10px;
				border: 1px solid #696969;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">开始</button>
		<!-- 创建盒子 -->
		<!-- 用点击事件改变盒子颜色 -->
		<div id="box1">
			<div id="box2">
				<div id="box3">
					<div id="box4">
						<div id="box5">
							
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			var i=0;
			$("#btn").click(function(){
				var color=["blue","pink","yellow","green","red"]//随机颜色数组
				color[i];//
				//定时循环变换
				var int = self.setInterval(function() {			
					console.log("1");
					i++;
				if(i==color.length){	//到color最后一个元素重新赋值为0颜色重置
					$("div").css({
						"background-color":"white",
					})
					i=0;
				}else{
					$("#box"+i).css({
						"background-color":color[i],				
					})	
				}
				}, 100)	
				
			
			})
			
			
		})
	</script>
	</body>
</html>
